<template>
    <header class="header-container">
        <div class="flex items-center gap-35px">
            <div class="cursor-pointer">
                <el-image class="w-40px h-40px" src="/images/logo.svg" fit="fill" />
            </div>
            <el-menu default-active="0" mode="horizontal">
                <el-menu-item index="1">Swap</el-menu-item>
                <el-menu-item index="2">Liquidity</el-menu-item>
                <el-sub-menu index="3">
                    <template #title>Wallet</template>
                    <el-menu-item index="3-1">子菜单1</el-menu-item>
                    <el-menu-item index="3-2">子菜单2</el-menu-item>
                    <el-menu-item index="3-3">子菜单3</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="4">
                    <template #title>E-Commerce</template>
                    <el-menu-item index="4-1">子菜单1</el-menu-item>
                    <el-menu-item index="4-2">子菜单2</el-menu-item>
                    <el-menu-item index="4-3">子菜单3</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="5">
                    <template #title>NFT</template>
                    <el-menu-item index="5-1">子菜单1</el-menu-item>
                    <el-menu-item index="5-2">子菜单2</el-menu-item>
                    <el-menu-item index="5-3">子菜单3</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="6">
                    <template #title>More</template>
                    <el-menu-item index="6-1">子菜单1</el-menu-item>
                    <el-menu-item index="6-2">子菜单2</el-menu-item>
                    <el-menu-item index="6-3">子菜单3</el-menu-item>
                </el-sub-menu>
            </el-menu>
        </div>
        <div class="flex items-center gap-15px">
            <div>
                <el-input
                    v-model="search"
                    style="width: 284px; --el-input-height: 40px"
                    size="large"
                    placeholder="Search Tokens"
                >
                    <template #prefix>
                        <div class="i-carbon:search text-orange w-20px h-20px"></div>
                    </template>
                </el-input>
            </div>
            <div>
                <el-button
                    style="height: 40px; width: 40px"
                    color="orange"
                    @click="appStore.toggleMode"
                >
                    <template #icon>
                        <div v-if="appStore.mode == 'light'" class="i-fa-solid:moon" />
                        <div v-else class="i-fa-solid:sun" />
                    </template>
                </el-button>
            </div>
            <div>
                <el-button
                    v-if="appStore.isConnect == false"
                    style="
                        height: 40px;
                        width: 174px;
                        font-size: 15px;
                        font-weight: 500;
                        --el-button-text-color: white;
                        --el-button-hover-text-color: white;
                    "
                    color="orange"
                    @click="appStore.connectWallet"
                    >Connect Wallet</el-button
                >
                <el-dropdown v-else>
                    <el-button
                        style="
                            height: 40px;
                            width: 160px;
                            font-size: 14px;
                            font-weight: 500;
                            border: 1px solid #e8effb;
                            --el-button-text-color: #141a21;
                            --el-button-hover-text-color: #141a21;
                        "
                        color="#FAFCFE"
                    >
                        <div class="flex items-center gap-15px">
                            <el-image class="w-19px" src="/images/logo.svg" fit="fill" />
                            <div>{{ appStore.mainNetValue + ' ' + appStore.mainNetUnit }}</div>
                            <div class="i-carbon:chevron-down"></div>
                        </div>
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="appStore.disConnectWallet">
                                断开钱包
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
    </header>
    <ConnectWallet />
</template>

<script setup>
import { ref } from 'vue'
import { useAppStore } from '@/stores/app'

const appStore = useAppStore()

const search = ref('')
</script>

<style scoped>
.header-container {
    @apply: px-50px h-77px flex flex-justify-between items-center bg-white border-b-1px border-solid border-gray-100 header position-sticky top-0;
}
:deep(.el-menu--horizontal > .el-sub-menu .el-sub-menu__title),
:deep(.el-menu--horizontal > .el-menu-item) {
    color: orange !important;
    font-weight: 500;
}
:deep(.el-menu--horizontal.el-menu) {
    border-bottom: unset !important;
}
:deep(.el-input__wrapper) {
    box-shadow: 0 0 0 1px orange inset !important;
}
:deep(.el-menu--horizontal > .el-menu-item.is-active),
:deep(.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title) {
    border-bottom: 2px solid orange !important;
    color: orange !important;
}
:deep(.el-button) {
    border-radius: 8px !important;
}
:deep(.el-icon) {
    width: 24px;
}
</style>
